import React, { Component } from 'react'
import { connect } from 'react-redux'
import { update } from '../../redux/actions'
import { Redirect } from 'react-router-dom'

// 组件引入
import HeaderSelector from '../../components/HeaderSelector/HeaderSelector'
// 引入antd组件
import {
  NavBar,
  // WingBlank,
  // List,
  InputItem,
  Icon,
  TextareaItem,
  Button, WhiteSpace,
} from 'antd-mobile'

// boss信息完善页面
class BossInfo extends Component {
  state = {
    'post': '',    //  职位
    company: '',  // 公司名称
    salary: '', // 薪资,
    info: '',  // 信息介绍
    header: '',  // 头像
  }
  
  render () {
    const {header, type} = this.props.user.data // 获取store中的用户信息
    // 如果有header头像，说明信息已经完善 跳转到首页boss或者大神
    if (header) {
      // 对重定向到哪个路由进行判断  /login  和 /boss
      const path = type === 'dashen' ? '/dashen' : '/boss'
      return <Redirect to={path}/>
    }
    
    return (
      <div>
        <NavBar>Boss資料完善</NavBar>
        {/*// 将父组件的选择头像的函数传递给子组件*/}
        <HeaderSelector choseHeader={this.choseHeader}></HeaderSelector>
        <WhiteSpace/>
        
        <InputItem placeholder='请输入'
                   onChange={value => this.handlerChange('post',
                     value)}>招聘职位</InputItem>
        <InputItem placeholder='请输入'
                   onChange={value => this.handlerChange('company', value)}
        >公司名称</InputItem>
        <InputItem placeholder='请输入'
                   onChange={value => this.handlerChange('salary', value)}
        >职位薪资</InputItem>
        <TextareaItem
          onChange={value => this.handlerChange('info', value)}
          placeholder='请输入'
          title='职位要求'
          rows='3'
        />
        
        <Button type={'primary'} onClick={this.save}>保 &nbsp; 存</Button>
      </div>
    )
  }
  
  // 数据绑定收集数据 改变stata信息
  handlerChange (name, value) {
    // console.log(name, value)
    // 拿到值后改变 []语法用来动态改变对象的key，中括号功能强大，可以是变量 那么key就是变量的值
    this.setState({
      [name]: value,
    })
  }
  
  // 提交更新 dispatch
  save = () => {
    // console.log(this.state)
    this.props.update(this.state)
  }
  // 选择头像的方法
  choseHeader = (header) => {
    console.log(header)
    this.setState({
      header,
    })
  }
  
}

export default connect(
  state => ({user: state.user}),
  // 将action注入到 props中
  {
    update,
  },
)(BossInfo)